<template>
  <view class="container">
    <ve-form ref="veFormRef" :model="form" :rules="rules">
      <ve-card title="分组1" type="none" fold v-model:initFold="foldStatus.fold1">
        <ve-form-item label="金额(带icon)" prop="price" unit="km" required labelTooltipContent="请输入金额的备注">
          <ve-input-number v-model="form.price" placeholder="请输入金额" />
        </ve-form-item>
        <ve-form-item label="备注(文本域)" :borderBottom="false" labelPosition="top">
          <ve-input type="textarea" v-model="form.otherFeeDesc" placeholder="请输入其他费用说明" />
        </ve-form-item>
      </ve-card>
      <ve-card title="分组2" type="none" fold v-model:initFold="foldStatus.fold2">
        <ve-form-item label="车牌号" prop="licenseNo" required>
          <ve-input v-model="form.licenseNo" placeholder="请输入车牌号" />
        </ve-form-item>
        <ve-form-item label="车辆租金" unit="元">
          <ve-input-number v-model="form.oil" :min="0" :max="16" />
        </ve-form-item>
        <ve-form-item label="修理厂商(下拉选)">
          <ve-picker-inline v-model="form.repair" placeholder="请选择修理厂商" :range="repairList"> </ve-picker-inline>
        </ve-form-item>
        <ve-form-item label="是否违章">
          <ve-checkbox-group @change="checkboxGroupChange">
            <ve-checkbox v-for="item in checkList" :key="item.name" v-model="item.checked" :name="item.name">
              {{ item.name }}
            </ve-checkbox>
          </ve-checkbox-group>
        </ve-form-item>
        <ve-form-item label="添加标签">
          <ve-checkbox v-model="form.isWZ">违章</ve-checkbox>
        </ve-form-item>
        <ve-form-item label="还车(照片)" labelPosition="top">
          <ve-upload v-model="form.imgList" :count="4"></ve-upload>
        </ve-form-item>
        <ve-form-item label="备注(文本域)" :borderBottom="false" labelPosition="top">
          <ve-input type="textarea" v-model="form.remark" placeholder="请输入其他费用说明" />
        </ve-form-item>
      </ve-card>
    </ve-form>

    <ve-bottom-box size="mini">
      <ve-button type="primary" size="long" @click="verifyForm">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup>
  import useFormFold from '@/hooks/useFormFold'
  import { reactive, ref } from 'vue'
  const rules = {
    price: {
      type: 'number',
      required: true,
      trigger: ['change', 'blur'],
      message: '请输入',
    },
    licenseNo: {
      required: true,
      message: '请输入',
    },
  }
  const repairList = [
    { value: 10, label: '张三维修店' },
    { value: 20, label: '李四维修店' },
    { value: 30, label: '王五维修店' },
  ]
  const checkList = [
    {
      name: '香蕉',
      checked: false,
      disabled: false,
    },
    {
      name: '苹果',
      checked: false,
      disabled: false,
    },
    {
      name: '苹果',
      checked: false,
      disabled: false,
    },
    {
      name: '苹果',
      checked: false,
      disabled: false,
    },
    {
      name: '苹果',
      checked: false,
      disabled: false,
    },
    {
      name: '苹果',
      checked: false,
      disabled: false,
    },
  ]
  const form = reactive({
    returnKilometre: undefined,
    licenseNo: undefined,
    oil: undefined,
    repair: undefined,
    imgList: [],
    otherFee: undefined,
    otherFeeDesc: undefined,
  })
  const { foldStatus, foldValidate } = useFormFold([
    {
      key: 'fold1',
      props: ['price'],
    },
    {
      key: 'fold2',
      props: ['licenseNo'],
    },
  ])

  const veFormRef = ref()
  const verifyForm = () => {
    veFormRef.value.validate((valid, errors) => {
      if (valid) {
        console.log('验证通过')
      } else {
        foldValidate(errors)
        console.log('验证失败', errors)
      }
    })
  }
</script>

<style>
  .container {
    height: auto;
    padding: 24rpx;
  }
</style>
